
<template>
  <div class="wrap" style="padding: 15px">
    <el-row>
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input
            v-model="queryParams.orderNumber"
            clearable
            placeholder="订单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="queryParams.orderPhone"
            clearable
            placeholder="手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getDate"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select
            v-model="queryParams.orderStatus"
            clearable
            placeholder="活动区域"
          >
            <el-option label="已完成" value="1"></el-option>
            <el-option label="待支付" value="2"></el-option>
            <el-option label="取消" value="3"></el-option>
            <el-option label="退款" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单来源">
          <el-select
            v-model="queryParams.orderSource"
            clearable
            placeholder="活动区域"
          >
            <el-option label="小程序" value="1"></el-option>
            <el-option label="POS" value="2"></el-option>
            <el-option label="后台" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select
            v-model="queryParams.payType"
            clearable
            placeholder="活动区域"
          >
            <el-option label="支付宝" value="1"></el-option>
            <el-option label="微信" value="2"></el-option>
            <el-option label="银联" value="3"></el-option>
            <el-option label="余额" value="4"></el-option>
            <el-option label="现金" value="5"></el-option>
            <el-option label="礼品卡" value="7"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      v-loading="loading"
      show-summary
      :summary-method="getSummaries"
    >
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="订单号" prop="orderNumber"></el-table-column>
      <el-table-column label="项目" prop="itemName"></el-table-column>
      <el-table-column label="订单价格" prop="orderAmount"> </el-table-column>
      <el-table-column label="实付价格" prop="payAmount"> </el-table-column>
      <el-table-column label="手机号" prop="orderPhone"> </el-table-column>
      <el-table-column label="订单来源" prop="orderSource">
        <template slot-scope="scope">{{
          scope.row.orderSource == 1
            ? "小程序"
            : scope.row.orderSource == 2
            ? "POS"
            : scope.row.orderSource == 3
            ? "后台"
            : "未知来源"
        }}</template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="支付方式" prop="payType"></el-table-column>
      <el-table-column label="订单状态" prop="orderStatus"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="show(scope.row.id)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: right">
      <el-pagination
        @size-change="getData"
        @current-change="getData"
        :current-page.sync="queryParams.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <Detail ref="detail" />
  </div>
</template>
<script>
import Detail from './detail.vue'
import { orderPageList, settingBookGround } from '@/config/api'
import { times, divide, plus } from "@/utils/tools"

export default {
  components: {
    Detail
  },
  data () {
    return {
      date: [],
      queryParams: {
        page: 1,
        pageSize: 10,
        orderNumber: undefined,
        orderPhone: undefined,
        startTimeStr: undefined,
        endTimeStr: undefined,
        orderStatus: undefined,
        orderSource: undefined,
        payType: undefined,

      },
      tableData: [],
      total: 0,
      loading: false,

    };
  },

  created () {
    this.getData()
  },
  methods: {
    getDate (e) {
      this.queryParams.startTimeStr = e[0]
      this.queryParams.endTimeStr = e[1]
    },
    // 新增
    show (id) {
      this.$refs.detail.show(id)
    },
    getData () {
      orderPageList(this.queryParams).then(res => {
        res.data.result.list.map(item => {
          item.orderAmount = divide(item.orderAmount, 100)
          item.payAmount = divide(item.payAmount, 100)
        })
        this.tableData = res.data.result.list
        this.total = res.data.result.total
      })
    },
    // 表尾合计
    getSummaries (param) {
      const { columns, data } = param;
      console.log(columns, data)
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 4 || index == 3) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return plus(prev, curr);
              } else {
                return prev;
              }
            }, 0);

          } else {
          }
        }

      });

      return sums;

    },
    search () {
      this.queryParams.page = 1
      this.getData()
    }

  },
};
</script>
